<template>
    <div class="function-item">
      <div class="icon-wrapper">
        <!-- 根据不同的标题设置不同的图片路径 -->
        <img v-if="item.title === '食物热量查询'" src="/png/shiwureliangchaxun.png" alt="食物热量查询图标">
        <img v-if="item.title === '营养成分分析'" src="/png/yingyangchengfenfenxi.png" alt="营养成分分析图标">
        <img v-if="item.title === '饮食计划制定'" src="/png/yinsijihuazhiding.png" alt="饮食计划制定图标">
        <img v-if="item.title === '食谱推荐'" src="/png/shiputuijian.png" alt="食谱推荐图标">
        <img v-if="item.title === '饮食禁忌提醒'" src="/png/yinshijinjitixing.png" alt="饮食禁忌提醒图标">
        <img v-if="item.title === '健康饮食小贴士'" src="/png/jiankangyinshixiaotieshi.png" alt="健康饮食小贴士图标">
        <img v-if="item.title === '体重管理'" src="/png/tizhongguanli.png" alt="体重管理图标">
        <img v-if="item.title === '运动建议'" src="/png/yundongjianyi.png" alt="运动建议图标">
        <img v-if="item.title === '饮食记录'" src="/png/yinshijilu.png" alt="饮食记录图标">
      </div>
      <p class="title">{{ item.title }}</p>
      <p class="sub-title">{{ item.subTitle }}</p>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';

  const props = defineProps({
    item: {
      type: Object,
      required: true
    }
  });
  </script>
  
  <style scoped>
  .function-item {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    width: 250px;
    height: 280px;
  }
  
  .function-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  }
  
  .icon-wrapper {
    width: 100px;
    height: 100px;
    margin: 30px auto 15px;
    border-radius: 50%;
    overflow: hidden;
  }
  
  .icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .sub-title {
    font-size: 16px;
    color: #666;
  }
  </style>